<!-- 个人中心 -->
<template>
  <view>
    <view class="user-container">
      <image class="logo" src="/static/logo.png"></image>
      <template v-if="isLogin && userInfo">
        <view class="u-flex">
          <view class="u-flex-2 u-text-right u-p-10">用户昵称:</view>
          <view class="u-flex-3 u-text-left">{{ userInfo.userName }}</view>
        </view>
        <view class="u-flex">
          <view class="u-flex-2 u-text-right u-p-10">会员等级:</view>
          <view class="u-flex-3 u-text-left">{{ isVip ? '尊贵会员' : '普通会员' }}</view>
        </view>
        <view class="u-flex">
          <view class="u-flex-2 u-text-right u-p-10">电子邮箱:</view>
          <view class="u-flex-3 u-text-left">{{ userInfo.email }}</view>
        </view>
        <view class="u-flex">
          <view class="u-flex-2 u-text-right u-p-10">电话号码:</view>
          <view class="u-flex-3 u-text-left">{{ userInfo.phone }}</view>
        </view>
        <view class="u-flex">
          <view class="u-flex-2 u-text-right u-p-10">所在城市:</view>
          <view class="u-flex-3 u-text-left">{{ userInfo.cityName }}</view>
        </view>
      </template>
      <view v-else class="to-login" @click="toLogin">未登录</view>
    </view>
    <!-- 与包裹页面所有内容的元素同级，且在它的下方 -->
    <tabbar />
  </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import tabbar from '@/components/tabbar/index.vue';

export default {
  name: 'User',
  components: { tabbar },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['isLogin', 'isVip']),
  },
  methods: {
    // 去登录
    toLogin() {
      this.$u.route({
        url: '/pages/login/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-container {
  text-align: center;
  padding: 0 20rpx;
}

.logo {
  height: 150rpx;
  width: 150rpx;
  margin: 200rpx auto 50rpx auto;
  border-radius: 50%;
}
</style>
